<template>
	<view class="category_wrapper">
		<!-- 章节项目 -->
		<view v-for="item in categories" :key="item.id" class="category_wrapper_item" @tap="handleQuestion(item)">
			<!-- 左侧图片 -->
			<view class="category_wrapper_item_img">

			</view>
			<!-- 右侧项目内容 -->
			<view class="category_wrapper_item_content">
				<view class="category_wrapper_item_content_title">
					{{item.name}}
				</view>
				<view class="category_wrapper_item_content_sub">
					{{item.counts}}题 | 难度{{item.difficulty}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadCategories
	} from "../../service/api.js";
	// 类别列表
	export default {
		data() {
			return {
				// 题目类别数组
				categories: []
			}
		},
		// 页面挂载完成后，获取类别数据
		mounted() {
			const categories = loadCategories();
			this.categories = categories;
		},
		methods: {
			// 点击类别进入对应的答题页面，需要将点击的类别id传入过去。
			handleQuestion(item) {
				const categoryId = item.id;
				uni.navigateTo({
					url: `/pages/question/index?categoryId=${categoryId}`,
				});
			}
		}
	}
</script>

<style>
	.category_wrapper {
		background: #0000000d;
		min-height: 100vh;
		padding: 30rpx;
	}

	.category_wrapper_item {
		background: white;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category_wrapper_item_img {
		width: 100rpx;
		height: 100rpx;
		background-image: url('../../static/icon.svg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.category_wrapper_item_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
	}

	.category_wrapper_item_content_title {
		font-weight: bold;
		color: #000000d4;
		flex: 1;
	}

	.category_wrapper_item_content_sub {
		font-size: 24rpx;
		color: #0000008f;
		margin-top: 14rpx;
	}
</style>
